<template>
  Name : {{ Name }}
  <br />
  age : {{ age }}
  <br />
  <button @click="btnClickName">change Name</button>
  <button @click="btnClickAge">change age</button>
</template>

<script>
import { computed, ref, watch, watchEffect } from 'vue'
export default {
  setup() {
    const Name = ref('jd')
    const age = ref(0)
    const btnClickName = () => {
      Name.value += 'pp'
    }

    // 监听name的变化
    watchEffect(() => {
      // 会自动立即执行一次(函数内部使用了哪些ref依赖会自动收集)
      console.log('name', Name.value)
      // console.log('name', age.value)
    })
    // watchEffect的返回值stoper用于停止监听
    const stoper = watchEffect(() => {
      console.log('name', age.value)
    })

    const btnClickAge = () => {
      age.value += 10
      if (age.value > 50) {
        stoper()
      }
    }

    watchEffect(Effects => {
      Effects(() => {
        // 当依赖的Name发生变化时，会先执行此函数
        console.log('副作用：当依赖的Name发生变化时，会先执行此函数')
      })
      console.log('aaa', Name.value)
    })
    return {
      Name,
      age,
      btnClickName,
      btnClickAge,
    }
  },
}
</script>
<style scoped></style>
